<template>
  <el-tabs type="border-card" v-model="activeName">
    <el-tab-pane label="点餐" name="first">
      <el-table
        :data="tableDataList"
        style="width: 100%"
        border
      >
        <el-table-column
          prop="goodsName"
          label="商品"
          width="auto"
          align="left"
        >
        </el-table-column>
        <el-table-column
          prop="count"
          label="数量"
          width="100"
          align="left"
        >
        </el-table-column>
        <el-table-column
          prop="price"
          label="单价"
          width="100"
          align="left"
        >
        </el-table-column>
        <el-table-column
          prop="total"
          label="总额"
          width="100"
          align="left"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          width="100"
          align="left"
        >
          <template slot-scope="scope">
            <el-button @click="deleteOrderList(scope.row)" type="text" size="small">删除</el-button>
            <el-button type="text" size="small" @click="addOrderList(scope.row)">增加</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row style="margin-top: 20px;">
        <!-- <el-button type="warning" size="small">挂单</el-button> -->
        <el-button type="danger" size="small" @click="deleteAllOrder">删除</el-button>
        <el-button type="success" size="small" @click="calcAllOrder">结账</el-button>
      </el-row>
    </el-tab-pane>
    <el-tab-pane label="挂单" name="second">挂单</el-tab-pane>
    <el-tab-pane label="外卖" name="third">外卖</el-tab-pane>
  </el-tabs>
</template>
<script>
  require('../../mock/mock.js');
  import axios from 'axios';
  import store from '../../vuex/store';
  import { mapState, mapMutations } from 'vuex';
  export default {
    name: 'Order',
    data() {
      return {
        activeName: 'first',
      }
    },
    computed: mapState(['tableDataList']), // 获取store的状态值
    methods: {
      calcAllOrder() {
        if (this.tableDataList.length < 1) {
          // 没有一条
          return this.$message({
            message: '不要急，请先选择商品!',
            type: 'warning'
          });
        }
        axios.post('/calc').then(res => {
          const { success } = res.data || {};
          if (success) {
            // 清空点餐list
            this.deleteAllOrder();
            this.$message({
              message: '恭喜你，结账成功',
              type: 'success'
            });
          }
        })
        
      },
      ...mapMutations(['addOrderList', 'deleteOrderList', 'deleteAllOrder']),
    },
    store,
  }
</script>
<style scoped>

</style>
